<template>
  <Card>
    <div class="content">
      <img src="@/assets/help-bg.png" alt="" />
      <div class="content-card">
        <img src="@/assets/bgtop.png" alt="" />
        <div class="head-title">{{ formData.title || "--" }}</div>
        <div class="content-card-content">
          <div>心愿内容</div>
          <div>{{ formData.content || "--" }}</div>
        </div>
        <div class="application">
          <div class="info">
            <div class="info-title">申请人:</div>
            <div class="info-content">{{ formData.userName || "--" }}</div>
          </div>
          <div class="info">
            <div class="info-title">手机号:</div>
            <div class="info-content">{{ formData.userPhone || "--" }}</div>
          </div>
          <div class="info">
            <div class="info-title">心愿类别:</div>
            <div class="info-content">{{ formData.typeName || "--" }}</div>
          </div>
          <div class="info">
            <div class="info-title">备注说明:</div>
            <div class="info-content">{{ formData.remark || "--" }}</div>
          </div>
          <div class="info">
            <div class="info-title">申请时间:</div>
            <div class="info-content">{{ formData.createTime || "--" }}</div>
          </div>
        </div>
        <!-- 认领人信息 -->
        <div
          class="application"
          v-if="formData.state == 2 || formData.state == 1"
        >
          <div class="info">
            <div class="info-title">认领人:</div>
            <div class="info-content">
              {{ formData.acceptUserName || "--" }}
            </div>
          </div>
          <div class="info">
            <div class="info-title">手机号:</div>
            <div class="info-content">
              {{ formData.acceptUserPhone || "--" }}
            </div>
          </div>
          <div class="info">
            <div class="info-title">认领时间:</div>
            <div class="info-content">{{ formData.acceptTime || "--" }}</div>
          </div>
          <div class="info">
            <div class="info-title">完成时间:</div>
            <div class="info-content">{{ formData.finishTime || "--" }}</div>
          </div>
        </div>
        <!-- 系统反馈 -->
        <div class="system" v-if="formData.sysFeedbackStatus">
          <div class="title">系统反馈</div>
          <div class="system-content">
            <div class="info">
              <div class="info-title">反馈内容:</div>
              <div class="info-content" style="line-height: 25px">
                {{ formData.sysFeedback || "--" }}
              </div>
            </div>
            <div class="info">
              <div class="info-title">图片内容:</div>
              <div class="info-content">
                <van-image
                  @click="handlePoto([item])"
                  :src="item"
                  v-for="(item, index) in formData.sysFeedbackImgs"
                  :key="index"
                >
                  <template v-slot:error>加载失败</template>
                </van-image>
              </div>
            </div>
          </div>
        </div>
        <!-- 用户反馈 -->
        <div
          class="user"
          v-if="
            (!formData.feedbackStatus && type == 'Feedback') ||
            formData.feedbackStatus
          "
        >
          <div class="title">申请人反馈</div>
          <van-form @submit="onSubmit" :readonly="type == 'VIEW'">
            <van-field
              name="rate"
              label="申请人评分"
              :rules="[{ required: true, message: '请评分' }]"
            >
              <template #input>
                <van-rate
                  :readonly="type == 'VIEW'"
                  v-model="formData.score"
                  :size="25"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                />
              </template>
            </van-field>
            <van-field
              v-model="formData.feedback"
              type="textarea"
              rows="3"
              label="反馈内容"
              placeholder="请输入反馈内容"
              :rules="[{ required: true, message: '请输入反馈内容' }]"
            />
            <van-field type="password" label="图片内容">
              <template #input>
                <van-uploader
                  :readonly="type == 'VIEW'"
                  :max-count="10"
                  :before-delete="beforeDelete"
                  :after-read="afterRead"
                  v-model="fileList"
                  accept="image/*"
                  multiple
                />
              </template>
            </van-field>
          </van-form>
        </div>
      </div>
      <div class="submit">
        <van-button
          round
          block
          color="linear-gradient(to right, #ff4e38, #ffba44)"
          type="info"
          native-type="submit"
          @click.stop="onSubmit"
          >{{ buttonName }}</van-button
        >
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card.vue";
import {
  postWxyDetail,
  postUploadImg,
  postWxyAccept,
  postWxyFinish,
  postWxyFeedback,
} from "@/api/business";
import Vue from "vue";
import { ImagePreview } from "vant";
Vue.use(ImagePreview);
export default {
  name: "WishDetail",
  components: { Card },
  data() {
    return {
      eventId: null, //心愿id
      fileList: [],
      formData: {},
      type: "", //类型
    };
  },
  created() {},
  mounted() {
    const query = this.$route.query || {};
    this.eventId = query.eventId || null;
    this.type = query.type || null;
    this.loadMyInfo();
  },
  computed: {
    buttonName() {
      switch (this.type) {
        case "VIEW":
          return "确认";
        case "Feedback":
          return "反馈";
        case "Claim":
          return "认领";
        case "Complete":
          return "完成";
      }
    },
  },
  methods: {
    loadMyInfo() {
      postWxyDetail({ eventId: this.eventId }).then((res) => {
        const data = {
          ...res.data,
          score: parseInt(res.data.score / 20),
          feedbackImgs: res.data.feedbackImgs
            ? res.data.feedbackImgs.split(",")
            : [],
          sysFeedbackImgs: res.data.sysFeedbackImgs
            ? res.data.sysFeedbackImgs.split(",")
            : [],
        };
        let fileList = data.feedbackImgs.map((item) => {
          return { url: item };
        });
        this.formData = { ...data, feedbackImgs: fileList };
        this.fileList = fileList;
      });
    },
    // 查看图片
    handlePoto(imglist) {
      ImagePreview({
        images: imglist,
        closeable: true,
      });
    },

    // 上传图片
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let formData = new FormData();
      formData.append("file", file.file);
      postUploadImg(formData)
        .then((res) => {
          file.status = "";
          this.formData.feedbackImgs.push({ url: res.data });
        })
        .catch(() => {
          file.status = "failed";
          file.message = "上传失败";
        });
    },
    // 删除图片
    beforeDelete(e, { index }) {
      this.fileList.splice(index, 1);
      this.formData.feedbackImgs.splice(index, 1);
    },
    onSubmit() {
      switch (this.type) {
        case "VIEW":
          this.$router.go(-1);
          break;
        case "Feedback":
          this.onSubmitFeedback();
          break;
        case "Claim":
          this.onSubmitClaim();
          break;
        case "Complete":
          this.onSubmitComplete();
          break;
      }
    },
    //反馈
    onSubmitFeedback() {
      const feedbackImgs = this.formData.feedbackImgs.map((item) => {
        return item.url;
      });
      const data = {
        eventId: this.eventId,
        feedback: this.formData.feedback,
        score: this.formData.score * 20,
        feedbackImgs: feedbackImgs.join(","),
      };
      postWxyFeedback(data).then((res) => {
        this.$toast({
          message: res.msg,
          duration: 1000,
        });
        this.$router.go(-1);
      });
    },
    // 认领
    onSubmitClaim() {
      postWxyAccept({ eventId: this.eventId }).then((res) => {
        this.$toast({
          message: res.msg,
          duration: 1000,
        });
        this.$router.go(-1);
      });
    },
    // 完成
    onSubmitComplete() {
      postWxyFinish({ eventId: this.eventId }).then((res) => {
        this.$toast({
          message: res.msg,
          duration: 1000,
        });
        this.$router.go(-1);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  img {
    width: 100%;
    height: 350px;
  }
  &-card {
    margin: 80px 40px;
    padding: 56px 32px;
    background: linear-gradient(180deg, #fef8eb 0%, #ffefe3 100%);
    border-radius: 20px;
    position: relative;

    img {
      width: 238px;
      height: 83px;
      position: absolute;
      top: -40px;
      left: 50%;
      margin-left: -119px;
    }
    .head-title {
      color: #7b5454;
      font-size: 22px;
      font-weight: bold;
      text-align: center;
    }
    .title {
      color: #ff7942;
      font-size: 18px;
      font-weight: bold;
      line-height: 80px;
    }
    &-content {
      padding: 20px 0;
      border-bottom: 2px dashed #e7d4bd;
      color: rgb(69, 66, 66);
      div {
        font-size: 16px;
        line-height: 45px;
      }
      div:nth-child(1) {
        color: #ff7942;
        font-size: 18px;
        font-weight: bold;
        line-height: 80px;
      }
    }
  }
  .application {
    padding: 20px 0;
    border-bottom: 2px dashed #e7d4bd;
  }
  .submit {
    width: 100%;
    background-color: #f4f4f4;
    padding: 100px 0;
    box-sizing: border-box;
    .van-button {
      width: 80%;
      margin: 0 auto;
    }
  }
  .user {
  }

  .info {
    font-size: 16px;
    display: flex;
    line-height: 60px;
    &-title {
      width: 150px;
      color: #baaba3;
    }
    &-content {
      display: flex;
      flex-wrap: wrap;
      width: calc(100% - 150px);
      color: rgb(69, 66, 66);
      .van-field {
        background-color: #fdf8f8;
        border-radius: 10px;
      }
      .van-image {
        width: 45%;
        min-height: 100px;
        margin: 10px;
        box-sizing: border-box;
      }
    }
  }
}
::v-deep {
  .van-form {
    .van-cell {
      padding: 10px 0 20px;
      background-color: transparent !important;
      flex-direction: column;
      .van-cell__title {
        margin-bottom: 10px;
      }
      .van-cell__title,
      .van-field__label {
        font-size: 16px !important;
        color: #baaba3 !important;
      }
      .van-field__value {
        font-size: 16px !important;
        color: rgb(69, 66, 66);
      }
      input {
        // width: 50%;
        line-height: 70px;
      }
      input,
      textarea {
        background-color: #fff;
        border-radius: 10px;
        padding: 0 10px;
      }
    }
  }
}
</style>
